<template>
  <div class="login-container">
    <div class="login-weaper  animated bounceInDown">
      <div class="login-left animate__animated animate__fadeInLeft">
        <img class="img" src="../../assets/images/logo.jpg" alt="">
        <p class="title">{{ website.title }}</p>
        <p>©{{ website.year }} {{ website.version }}</p>
      </div>
      <div class="login-border animate__animated animate__fadeInRight">
        <div class="login-main">

          <p class="title titleMedia">{{ website.title }}</p>

          <userLogin />
          <div class="login-menu">
            <!--  第三方登录  -->
            <a
              href="#"
              style="margin:0;display: inline-block;color: rgb(24, 144, 255); font-size: 13px;text-align: left;"
            >第三方登录</a>
            <social-signin />
            <!--  底部  -->
            <div class="mt20 el-login-footer">
              <div style="display: inline-block;">
                <img
                  style="vertical-align: sub;"
                  src="https://yby6.com/themes/hshan/assets/images/beian.png"
                  width="16px"
                  height="16px"
                  alt="杨不易呀"
                >
                <a href="https://beian.miit.gov.cn/" target="_blank" data-pjax-state="">湘ICP备20007214号-2</a>
              </div>
              <div>Copyright © 2022 <a href="https://www.yangbuyi.top">www.yangbuyi.top</a> All Rights Reserved.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@/styles/login.scss'
import userLogin from '@/views/login/components/userlogin'
import { mapGetters } from 'vuex'
import SocialSignin from '@/views/login/components/SocialSignin.vue'

export default {
  name: 'Login',
  components: {
    userLogin,
    SocialSignin
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['website'])
  },
  mounted() {
    this.open()
  },
  methods: {
    open() {
      const s = `
      margin-bottom: 3px;
      line-height: 15px;
      padding: 5px;
      box-sizing: border-box;
      width: 100%;
      `
      const div = `
      <div class="login-info" style="${s}">个人博客: <a href="https://yby6.com" target="_blank">https://yby6.com</a></div>
      <div class="login-info" style="${s}">微信支付: <a href="https://lzys522.cn/wx" target="_blank">https://lzys522.cn/wx</a></div>
      <div class="login-info" style="${s}">爱心案例: <a href="https://lzys522.cn/love" target="_blank">https://lzys522.cn/love</a></div>
      <div class="login-info" style="${s}">公众号登录: <a href="https://lzys522.cn/gzh" target="_blank">https://lzys522.cn/gzh</a></div>
      `
      this.$notify({
        showClose: true,
        duration: 0,
        title: 'Other',
        dangerouslyUseHTMLString: true,
        message: div
      })
    }
  }
}
</script>
<style lang="scss" scoped>

.el-login-footer {
  height: 20px;
  line-height: 20px;
  width: 100%;
  text-align: center;
  color: #938888;
  font-family: Arial, serif;
  font-size: 12px;
  letter-spacing: 1px;
  margin: 30px auto;
}

.titleMedia {
  display: none;
}

@media (max-width: 500px) {
  .login-left {
    display: none;
  }

  .login-main {
    padding: 30px 15px;
  }

  .login-container {

    &::before {
      content: ' ';
      position: absolute;
      top: 0;
      right: 0;
      left: unset;
    }
  }

  .titleMedia {
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center;
    color: #e3e3e3;
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 25px;
    font-weight: 700;
    display: block;
  }
}

::v-deep .login-info {
  line-height: 15px;
  height: 15px;
  border: 1px solid #000;
  border-radius: 5px;
}
</style>
